<template>
  <div id="sidebar">
    <el-row class="tac" style="height: 100%">
      <el-col :span="12" style="height: 100% ;width: 100%" >
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span >公寓管理</span>
            </template>
            <el-menu-item @click="handleAreaManage">园区管理</el-menu-item>
            <el-menu-item @click="handleBuildingManage">楼栋管理</el-menu-item>
            <el-menu-item @click="handleRoomManage">房间管理</el-menu-item>
            <el-menu-item @click="handleStudentDormitoryManage">学生住宿情况</el-menu-item>

          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span >信息管理</span>
            </template>
            <el-menu-item @click="handleLeaderManage">分管领导管理</el-menu-item>
            <el-menu-item @click="handleStudentManage">学生管理</el-menu-item>
            <el-menu-item @click="handleDormitoryAdminManage">宿管管理</el-menu-item>
<!--            <el-menu-item @click="handleTeacherManage">教师管理</el-menu-item>-->
            <el-menu-item @click="handleKeeperManage">维修员管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>

</template>
<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handleAreaManage () {
      this.$router.push({name: 'areamanage'})
    },
    handleBuildingManage () {
      this.$router.push({name: 'buildingmanage'})
    },
    handleStudentDormitoryManage () {
      this.$router.push({name: 'studentdormitorymanage'})
    },
    handleLeaderManage () {
      this.$router.push({name: 'leadermanage'})
    },
    handleStudentManage () {
      this.$router.push({name: 'studentmanage'})
    },
    handleDormitoryAdminManage () {
      this.$router.push({name: 'dormitoryadminmanage'})
    },
    // handleTeacherManage () {
    //   this.$router.push({name: 'teachermanage'})
    // },
    handleKeeperManage () {
      this.$router.push({name: 'keepermanage'})
    },
    handleRoomManage () {
      this.$router.push({name: 'roommanage'})
    }
  }
}
</script>

<style scoped>
#sidebar{
  height: 100%;
}
</style>
